<template>
    <div v-if="hasData" class="shensha-display">
        <!-- 四柱神煞 -->
        <div v-if="baziPillars.length > 0" class="shensha-section">
            <div class="shensha-title">四柱神煞</div>
            <div class="shensha-content">
                <div 
                    v-for="(pillar, index) in baziPillars" 
                    :key="`bazi-${index}`"
                    class="shensha-item"
                >
                    <div class="shensha-ganzhi">{{ pillar.ganzhi }}</div>
                    <div class="shensha-list">
                        <span 
                            v-for="(sha, shaIndex) in pillar.shenshas" 
                            :key="`bazi-${index}-${shaIndex}`"
                            class="shensha-tag"
                        >
                            {{ sha }}
                        </span>
                        <span v-if="pillar.shenshas.length === 0" class="shensha-empty">无</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 大运神煞 -->
        <div v-if="decadePillars.length > 0" class="shensha-section">
            <div class="shensha-title">大运神煞</div>
            <div class="shensha-content">
                <div 
                    v-for="(pillar, index) in decadePillars" 
                    :key="`decade-${pillar.index}`"
                    class="shensha-item"
                    :class="{ 'selected': pillar.index === props.selectedDecadeIndex }"
                >
                    <div class="shensha-ganzhi">{{ pillar.ganzhi }}</div>
                    <div class="shensha-list">
                        <span 
                            v-for="(sha, shaIndex) in pillar.shenshas" 
                            :key="`decade-${pillar.index}-${shaIndex}`"
                            class="shensha-tag"
                        >
                            {{ sha }}
                        </span>
                        <span v-if="pillar.shenshas.length === 0" class="shensha-empty">无</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 流年神煞 -->
        <div v-if="fortunePillars.length > 0" class="shensha-section">
            <div class="shensha-title-wrapper">
                <div class="shensha-title">流年神煞</div>
                <div class="shensha-toggle" @click="toggleExpand('fortune')">
                    <span class="toggle-text">{{ expandedState.fortune ? '收起' : '展开' }}</span>
                    <svg 
                        class="toggle-icon" 
                        :class="{ 'expanded': expandedState.fortune }"
                        width="12" 
                        height="12" 
                        viewBox="0 0 12 12"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
            <div class="shensha-content">
                <div 
                    v-for="(pillar, index) in displayedFortunePillars" 
                    :key="`fortune-${pillar.index}`"
                    class="shensha-item"
                    :class="{ 'selected': pillar.index === props.selectedFortuneIndex }"
                >
                    <div class="shensha-ganzhi">{{ pillar.ganzhi }}</div>
                    <div class="shensha-list">
                        <span 
                            v-for="(sha, shaIndex) in pillar.shenshas" 
                            :key="`fortune-${pillar.index}-${shaIndex}`"
                            class="shensha-tag"
                        >
                            {{ sha }}
                        </span>
                        <span v-if="pillar.shenshas.length === 0" class="shensha-empty">无</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 流月神煞 -->
        <div v-if="monthPillars.length > 0 && props.selectedMonthIndex !== undefined && props.selectedMonthIndex >= 0" class="shensha-section">
            <div class="shensha-title-wrapper">
                <div class="shensha-title">流月神煞</div>
                <div class="shensha-toggle" @click="toggleExpand('month')">
                    <span class="toggle-text">{{ expandedState.month ? '收起' : '展开' }}</span>
                    <svg 
                        class="toggle-icon" 
                        :class="{ 'expanded': expandedState.month }"
                        width="12" 
                        height="12" 
                        viewBox="0 0 12 12"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
            <div class="shensha-content">
                <div 
                    v-for="(pillar, index) in displayedMonthPillars" 
                    :key="`month-${pillar.index}`"
                    class="shensha-item"
                    :class="{ 'selected': pillar.index === props.selectedMonthIndex }"
                >
                    <div class="shensha-ganzhi">{{ pillar.ganzhi }}</div>
                    <div class="shensha-list">
                        <span 
                            v-for="(sha, shaIndex) in pillar.shenshas" 
                            :key="`month-${pillar.index}-${shaIndex}`"
                            class="shensha-tag"
                        >
                            {{ sha }}
                        </span>
                        <span v-if="pillar.shenshas.length === 0" class="shensha-empty">无</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 流日神煞 -->
        <div v-if="dayPillars.length > 0" class="shensha-section">
            <div class="shensha-title-wrapper">
                <div class="shensha-title">流日神煞</div>
                <div class="shensha-toggle" @click="toggleExpand('day')">
                    <span class="toggle-text">{{ expandedState.day ? '收起' : '展开' }}</span>
                    <svg 
                        class="toggle-icon" 
                        :class="{ 'expanded': expandedState.day }"
                        width="12" 
                        height="12" 
                        viewBox="0 0 12 12"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
            <div class="shensha-content">
                <div 
                    v-for="(pillar, index) in displayedDayPillars" 
                    :key="`day-${pillar.index}`"
                    class="shensha-item"
                    :class="{ 'selected': pillar.index === props.selectedDayIndex }"
                >
                    <div class="shensha-ganzhi">{{ pillar.ganzhi }}</div>
                    <div class="shensha-list">
                        <span 
                            v-for="(sha, shaIndex) in pillar.shenshas" 
                            :key="`day-${pillar.index}-${shaIndex}`"
                            class="shensha-tag"
                        >
                            {{ sha }}
                        </span>
                        <span v-if="pillar.shenshas.length === 0" class="shensha-empty">无</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 流时神煞 -->
        <div v-if="hourPillars.length > 0" class="shensha-section">
            <div class="shensha-title-wrapper">
                <div class="shensha-title">流时神煞</div>
                <div class="shensha-toggle" @click="toggleExpand('hour')">
                    <span class="toggle-text">{{ expandedState.hour ? '收起' : '展开' }}</span>
                    <svg 
                        class="toggle-icon" 
                        :class="{ 'expanded': expandedState.hour }"
                        width="12" 
                        height="12" 
                        viewBox="0 0 12 12"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
            <div class="shensha-content">
                <div 
                    v-for="(pillar, index) in displayedHourPillars" 
                    :key="`hour-${pillar.index}`"
                    class="shensha-item"
                    :class="{ 'selected': pillar.index === props.selectedHourIndex }"
                >
                    <div class="shensha-ganzhi">{{ pillar.ganzhi }}</div>
                    <div class="shensha-list">
                        <span 
                            v-for="(sha, shaIndex) in pillar.shenshas" 
                            :key="`hour-${pillar.index}-${shaIndex}`"
                            class="shensha-tag"
                        >
                            {{ sha }}
                        </span>
                        <span v-if="pillar.shenshas.length === 0" class="shensha-empty">无</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

interface Pillar {
    stem?: string
    branch?: string
    shenshas?: string[]
}

interface BaziData {
    year?: Pillar
    month?: Pillar
    day?: Pillar
    hour?: Pillar
}

interface ListItem {
    stem?: string
    branch?: string
    shenshas?: string[]
    ganzhi?: string
    [key: string]: any
}

interface Props {
    baziData?: BaziData
    decadeList?: ListItem[]
    fortuneList?: ListItem[]
    monthList?: ListItem[]
    dayList?: ListItem[]
    hourList?: ListItem[]
    selectedDecadeIndex?: number
    selectedFortuneIndex?: number
    selectedMonthIndex?: number
    selectedDayIndex?: number
    selectedHourIndex?: number
}

const props = defineProps<Props>()

// 展开/收起状态（默认收起）
const expandedState = ref({
    fortune: false,
    month: false,
    day: false,
    hour: false
})

// 切换展开/收起
const toggleExpand = (type: 'fortune' | 'month' | 'day' | 'hour') => {
    expandedState.value[type] = !expandedState.value[type]
}

// 从列表中提取天干
const extractStem = (item: ListItem): string => {
    if (item.stem) {
        return item.stem
    }
    if (item.ganzhi && item.ganzhi.length >= 1) {
        return item.ganzhi[0] || ''
    }
    return ''
}

// 从列表中提取地支
const extractBranch = (item: ListItem): string => {
    if (item.branch) {
        return item.branch
    }
    if (item.ganzhi && item.ganzhi.length >= 2) {
        return item.ganzhi[1] || ''
    }
    return ''
}

// 构建四柱神煞数据（直接显示干支，不带前缀）
const baziPillars = computed(() => {
    const pillars: Array<{ ganzhi: string; shenshas: string[] }> = []
    
    if (props.baziData) {
        const data = [
            props.baziData.year,
            props.baziData.month,
            props.baziData.day,
            props.baziData.hour
        ]
        
        data.forEach((pillar) => {
            if (pillar?.stem && pillar?.branch) {
                pillars.push({
                    ganzhi: `${pillar.stem}${pillar.branch}`,
                    shenshas: pillar.shenshas || []
                })
            }
        })
    }
    
    return pillars
})

// 构建大运神煞数据（直接显示干支）
const decadePillars = computed(() => {
    const pillars: Array<{ ganzhi: string; shenshas: string[]; index: number }> = []
    
    if (props.decadeList && props.decadeList.length > 0) {
        props.decadeList.forEach((item, index) => {
            const stem = extractStem(item)
            const branch = extractBranch(item)
            if (stem && branch) {
                pillars.push({
                    ganzhi: `${stem}${branch}`,
                    shenshas: item.shenshas || [],
                    index
                })
            }
        })
    }
    
    return pillars
})

// 构建流年神煞数据（直接显示干支）
const fortunePillars = computed(() => {
    const pillars: Array<{ ganzhi: string; shenshas: string[]; index: number }> = []
    
    if (props.fortuneList && props.fortuneList.length > 0) {
        props.fortuneList.forEach((item, index) => {
            const stem = extractStem(item)
            const branch = extractBranch(item)
            if (stem && branch) {
                pillars.push({
                    ganzhi: `${stem}${branch}`,
                    shenshas: item.shenshas || [],
                    index
                })
            }
        })
    }
    
    return pillars
})

// 流年显示的数据（收起时只显示选中的）
const displayedFortunePillars = computed(() => {
    if (expandedState.value.fortune) {
        return fortunePillars.value
    }
    // 收起时只显示选中的
    if (props.selectedFortuneIndex !== undefined && props.selectedFortuneIndex >= 0) {
        const selected = fortunePillars.value.find(p => p.index === props.selectedFortuneIndex)
        return selected ? [selected] : []
    }
    return []
})

// 构建流月神煞数据（直接显示干支）
const monthPillars = computed(() => {
    const pillars: Array<{ ganzhi: string; shenshas: string[]; index: number }> = []
    
    if (props.monthList && props.monthList.length > 0) {
        props.monthList.forEach((item, index) => {
            const stem = extractStem(item)
            const branch = extractBranch(item)
            if (stem && branch) {
                pillars.push({
                    ganzhi: `${stem}${branch}`,
                    shenshas: item.shenshas || [],
                    index
                })
            }
        })
    }
    
    return pillars
})

// 流月显示的数据（收起时只显示选中的）
const displayedMonthPillars = computed(() => {
    if (expandedState.value.month) {
        return monthPillars.value
    }
    // 收起时只显示选中的
    if (props.selectedMonthIndex !== undefined && props.selectedMonthIndex >= 0) {
        const selected = monthPillars.value.find(p => p.index === props.selectedMonthIndex)
        return selected ? [selected] : []
    }
    return []
})

// 构建流日神煞数据（直接显示干支）
const dayPillars = computed(() => {
    const pillars: Array<{ ganzhi: string; shenshas: string[]; index: number }> = []
    
    if (props.dayList && props.dayList.length > 0) {
        props.dayList.forEach((item, index) => {
            const stem = extractStem(item)
            const branch = extractBranch(item)
            if (stem && branch) {
                pillars.push({
                    ganzhi: `${stem}${branch}`,
                    shenshas: item.shenshas || [],
                    index
                })
            }
        })
    }
    
    return pillars
})

// 流日显示的数据（收起时只显示选中的）
const displayedDayPillars = computed(() => {
    if (expandedState.value.day) {
        return dayPillars.value
    }
    // 收起时只显示选中的
    if (props.selectedDayIndex !== undefined && props.selectedDayIndex >= 0) {
        const selected = dayPillars.value.find(p => p.index === props.selectedDayIndex)
        return selected ? [selected] : []
    }
    return []
})

// 构建流时神煞数据（直接显示干支）
const hourPillars = computed(() => {
    const pillars: Array<{ ganzhi: string; shenshas: string[]; index: number }> = []
    
    if (props.hourList && props.hourList.length > 0) {
        props.hourList.forEach((item, index) => {
            const stem = extractStem(item)
            const branch = extractBranch(item)
            if (stem && branch) {
                pillars.push({
                    ganzhi: `${stem}${branch}`,
                    shenshas: item.shenshas || [],
                    index
                })
            }
        })
    }
    
    return pillars
})

// 流时显示的数据（收起时只显示选中的）
const displayedHourPillars = computed(() => {
    if (expandedState.value.hour) {
        return hourPillars.value
    }
    // 收起时只显示选中的
    if (props.selectedHourIndex !== undefined && props.selectedHourIndex >= 0) {
        const selected = hourPillars.value.find(p => p.index === props.selectedHourIndex)
        return selected ? [selected] : []
    }
    return []
})

// 判断是否有数据
const hasData = computed(() => {
    return baziPillars.value.length > 0 || 
           decadePillars.value.length > 0 || 
           fortunePillars.value.length > 0 || 
           monthPillars.value.length > 0 || 
           dayPillars.value.length > 0 || 
           hourPillars.value.length > 0
})
</script>

<style scoped>
.shensha-display {
    margin: 16px;
    padding: 0;
    background: #fff;
}

.shensha-section {
    margin-bottom: 20px;
}

.shensha-section:last-child {
    margin-bottom: 0;
}

.shensha-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.shensha-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.shensha-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    color: #64748b;
    font-size: 13px;
    transition: color 0.2s;
}

.shensha-toggle:hover {
    color: #3b82f6;
}

.toggle-icon {
    transition: transform 0.3s;
    color: currentColor;
}

.toggle-icon.expanded {
    transform: rotate(180deg);
}

.shensha-content {
    display: flex;
    flex-direction: column;
}

.shensha-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 0;
}

.shensha-ganzhi {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    flex-shrink: 0;
    line-height: 1.8;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 4px;
    transition: all 0.2s;
    text-align: center;
    align-self: flex-start;
}

.shensha-ganzhi:hover {
    background: #f1f5f9;
}

.shensha-item.selected .shensha-ganzhi {
    background: #3b82f6;
    color: #fff;
}

.shensha-list {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    line-height: 1.8;
    min-width: 0;
}

.shensha-tag {
    display: inline;
    font-size: 14px;
    color: #1e293b;
    line-height: 1.8;
    white-space: nowrap;
}

.shensha-tag:not(:last-child)::after {
    content: '、';
}

.shensha-empty {
    font-size: 13px;
    color: #94a3b8;
    font-style: italic;
}
</style>




